<template>
  <div>
    <div class="shopDetailsAnalysis" v-if="hasRoot">
      <div class="main">
        <div class="title">达人列表</div>
        <div class="flexBox">
          <div class="timeTab">
            <button :class="{active:active=='近7天'}" @click="timeTab('近7天')">近7天</button>
            <button :class="{active:active=='30天'}" @click="timeTab('30天')">30天</button>
            <button :class="{active:active=='90天'}" @click="timeTab('90天')">90天</button>
          </div>
          <div class="filter" @click="activeFiltr=!activeFiltr">
            <img src="../../../assets/img/filter.png" alt />
            筛选
          </div>
        </div>
        <div class="searchBox">
          <input
            v-model.trim="keyWords"
            @keydown.enter="searchGoods"
            type="text"
            placeholder="请输入商品名称或关键词"
          />
          <img v-if="keyWords.length" @click="searchGoods" src="../../../assets/two/search.png" alt />
          <img v-if="!keyWords.length" src="../../../assets/two/search-nohover.png" alt />
        </div>
        <ul>
          <li v-for="item,i in infoData" :key="i">
            <div class="listBox">
              <div class="logoB" @click="go_to_au(item.authorId)">
                <div class="liveBox" v-if="item.syatus==1">
                  <div class="liveAnimation">
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <!-- <span class="liveText">直播中</span> -->
                </div>
                <div class="logo">
                  <img :src="item.logo" alt />
                </div>
              </div>
              <div class="listRig">
                <p class="tit" @click="go_to_au(item.authorId)">{{item.nickName}}</p>
                <p class="word" v-if="item.publicPraise">带货口碑：{{item.publicPraise}}</p>
                <p class="word" v-if="!item.publicPraise">带货口碑：--</p>
              </div>
            </div>
            <div class="bot">
              <div>
                <p>{{format_num(item.proCount)}}</p>
                <p>推广商品数</p>
              </div>
              <div>
                <p>{{format_num(item.roomCount)}}</p>
                <p>关联直播</p>
              </div>

              <div>
                <p>{{format_num(item.awemeCount)}}</p>
                <p>关联视频</p>
              </div>
              <!-- <div>
              <p>--</p>
              <p>销售额</p>
              </div>-->
            </div>
          </li>
        </ul>
        <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
        <p class="more" v-if="!isNoMoreTalent && infoData.length && !loading" @click="more">查看更多</p>
        <p class="more_no" v-if="!loading && isNoMoreTalent">我是有底线的~</p>
        <!-- 我是有底线的~ -->
        <!-- <FooterText v-else /> -->
        <div class="no_data" v-if="!infoData.length && !loading">
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
      </div>
      <van-popup
        v-model="activeFiltr"
        position="right"
        :class="'filtr_select_box'"
        :get-container="'body'"
      >
        <div class="f_content">
          <van-collapse v-model="filtrActive">
            <van-collapse-item title="达人行业" :name="1">
              <div class="f_btn_box">
                <template v-for="item,idx in typeDatas">
                  <i
                    @click="industryFn(item)"
                    :key="idx"
                    :class="{'active':fActive==item.name}"
                  >{{item.name}}</i>
                </template>
                <!-- <i class="more" @click="unfoldMoreFn">{{isUnfold?'收起':'展开更多'}}</i> -->
              </div>
            </van-collapse-item>
            <van-collapse-item title="粉丝数" :name="2">
              <div class="f_btn_box">
                <i
                  v-for="item,idx in fFansData"
                  :class="{'active':item.active}"
                  @click="fFansDataFn(item)"
                  :key="idx"
                >{{item.text}}</i>
              </div>
            </van-collapse-item>
            <van-collapse-item title="口碑等级" :name="3">
              <div class="f_btn_box">
                <i
                  v-for="item,idx in fLevelData"
                  :class="{'active':item.active}"
                  @click="fLevelDataFn(item)"
                  :key="idx"
                >{{item.text}}</i>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
        <div class="f_btns_sub">
          <i @click="resetFiltr">重置</i>
          <i class="active" @click="subFiltr">确定</i>
        </div>
      </van-popup>
    </div>
    <noPower
      :minLeve="$store.state.userRoot[159][166].ownerMinLevel"
      style="background:#fff;"
      v-else
    />
    <!-- <div class="line"></div> -->
  </div>
</template>

<script>
export default {
  props: [],
  data() {
    return {
      fActive: '全部',
      activeFiltr: false, //是否展开筛选下拉框
      isUnfold: false, //是否展开更多
      filtrActive: [1], //默认打开哪个筛选条件
      typeDatas: [], //行业分类
      typeDatas2: [], //行业分类后面的数据（点击展开之后拼接的数据）
      categoryId: 0, //筛选的行业类型id
      fans: null, //筛选粉丝数区间参数
      level: null, //筛选口碑
      hasRoot: true,
      fFansData: [
        //筛选-粉丝数量
        { text: '全部', value: null, active: true },
        { text: '<1w', value: '1 ', active: false },
        { text: '1w-10w', value: '2', active: false },
        { text: '10w-50w', value: '3', active: false },
        { text: '50w-100w', value: '4', active: false },
        { text: '100w-500w', value: '5', active: false },
        { text: '500w-1000w', value: '6', active: false },
        { text: '>1000w', value: '7', active: false }
      ],
      fLevelData: [
        //筛选-口碑分
        { text: '全部', value: null, active: true },
        { text: '高', value: 1, active: false },
        { text: '中', value: 2, active: false },
        { text: '低', value: 3, active: false },
        { text: '无', value: 0, active: false }
      ],
      active: '30天',
      keyWords: '',
      startDate: '',
      endDate: '',
      infoData: [],
      size: 10,
      page: 1,
      my_radio01: '全部',
      my_radio02: '全部',
      categoryList: [],
      total: 0,
      loading: false,
      isNoMoreTalent:false,
    };
  },
  components: {},
  computed: {},
  created() {
    this.infodataauthoranalysis();
  },
  mounted() {},
  watch: {
    keyWords(newValue) {
      if (!newValue.length) {
        this.page = 1;
        this.infoData = [];
        this.isNoMoreTalent = false
        this.infodataauthoranalysis();
      }
    }
  },
  methods: {
    industryFn(item) {
      //筛选-点击行业分类
      this.fActive = item.name;
      this.categoryId = item.value;
    },
    fFansDataFn(item) {
      //筛选-点击粉丝数
      this.fFansData.forEach(itemC => {
        itemC.active = item == itemC;
      });
      this.fans = item.value;
    },
    fLevelDataFn(item) {
      //筛选-点击粉丝数
      this.fLevelData.forEach(itemC => {
        itemC.active = item == itemC;
      });
      this.level = item.value;
    },
    resetData(datas) {
      //筛选-重置选中的值
      datas.forEach((item, idx) => {
        item.active = !Boolean(idx);
      });
      return datas;
    },
    resetFiltr() {
      //筛选框重置按钮
      this.fActive = '全部';
      this.resetData(this.fFansData);
      this.resetData(this.fLevelData);
      this.categoryId = 0; //筛选的行业类型id
      this.fans = null; //筛选粉丝数区间参数
      this.level = null; //筛选口碑
    },
    subFiltr() {
      //筛选框确定按钮
      this.activeFiltr = false;
      this.initF();
      this.infoData = [];
      this.isNoMoreTalent = false
      this.infodataauthoranalysis();
    },
    initF() {
      //重置筛选项
      this.page = 1;
      this.datas = [];
      this.isMore = true;
    },
    // 查看更多
    more() {
      this.page += 1;
      this.infodataauthoranalysis();
    },
    go_to_au(id) {
      this.$router.push({ path: '/talentdetails', query: { id } });
    },
    infodataauthoranalysis() {
      this.getTime();
      this.loading = true;
      this.$axios
        .post('/api/shop/infodataauthoranalysis', {
          ShopID: this.$route.query.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate, //结束时间
          NickName: this.keyWords, //昵称
          CategroyID: this.categoryId, //分类ID
          NumberOfFans: this.fans, //粉丝数量(1 小于1万,2 1万-10万,3 10万-50万,4 50万-100万,5 100万-500万,6 500万-1000万,7 大于1000万)
          PublicPraise: this.level, //口碑分(1 高,2 中,3 低)
          PageIndex: this.page, //分页索引
          PageSize: this.size //分页大小
        })
        .then(res => {
          this.loading = false;
          // console.log(this.loading);
          this.totalCount = 0;
          if (res.data.code == 0) {
            this.infoData = this.infoData.concat(res.data.data.list);
            this.typeDatas = res.data.data.categoryList;
            this.typeDatas.unshift({ name: '全部', value: 0 });
            this.total = res.data.data.pageInfo.totalCount;
            if(this.infoData.length && res.data.data.list.length < this.size){
              this.isNoMoreTalent = true;
            }
          }else if(res.data.code == 1002 && this.infoData.length){
            this.isNoMoreTalent = true;
          }else if (res.data.code == 1003) {
            this.hasRoot = false;
          }
        });
    },
    getTime() {
      switch (this.active) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
    },
    // 搜索
    searchGoods() {
      this.page = 1;
      this.infoData = [];
      this.isNoMoreTalent = false
      this.infodataauthoranalysis();
    },
    timeTab(t) {
      if (this.active != t) {
        this.page = 1;
        this.active = t;
        this.infoData = [];
        this.isNoMoreTalent = false
        this.infodataauthoranalysis();
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
@import './../../../common/common.styl';

.tld_details {
  font-size: 0.32rem;
  color: #b5b5b5;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  text-align: center;
}

// 分割线
.line {
  width: 100%;
  height: 0.1866rem;
  background: #f1f1f1;
}

.shopDetailsAnalysis {
  padding-top: 0.706667rem;
  padding-bottom: 0.8rem;
  background: #fff;

  .main {
    width: 9.2rem;
    margin: auto;

    .title {
      font-size: 0.4rem;
      color: #222222;
      padding-left: 0.2rem;
      font-weight: 600;
      position: relative;
    }

    .title::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1rem;
      display: inline-block;
      width: 0.08rem;
      height: 0.3733rem;
      background-color: #fd7f2c;
      border-radius: 0.1333rem;
    }

    .timeTab {
      background: #fff;
      height: 100%;
      display: flex;
      align-items: center;

      button {
        margin-right: 0.266667rem;
        width: 1.253333rem;
        height: 0.613333rem;
        border: solid 1px #e5e5e5;
        border-radius: 0.053333rem;
        font-size: 0.32rem;
        color: #555555;
        background: #fff;
      }

      .active {
        background-color: #fd7f2c;
        border: solid 1px #fd7f2c;
        border-radius: 4px;
        color: #ffffff;
      }
    }

    .active {
      background-color: #fd7f2c;
      border-radius: 4px;
      color: #ffffff;
    }

    .flexBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.413333rem;
    }

    .filter {
      font-size: 0.373333rem;
      color: #555555;

      img {
        width: 0.333333rem;
        height: 0.32rem;
      }
    }

    .searchBox {
      display: flex;
      width: 9.2rem;
      position: relative;
      box-sizing: border-box;
      height: 0.98rem;
      border-radius: 0.13rem;
      border: solid 1px #e5e5e5;
      background-color: #fff;
      padding: 0 1.06rem 0 0.42rem;

      input {
        width: 100%;
        height: 100%;
        border: none;
        font-size: 0.37rem;
      }

      img {
        position: absolute;
        right: 0.453333rem;
        align-self: center;
        // margin-left: 0.266667rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }

    ul {
      li {
        padding: 0.4rem 0;
        border-bottom: 1px solid #e5e5e5;

        .listBox {
          display: flex;

          .logoB {
            position: relative;
            margin-right: 0.266667rem;
            width: 1.333333rem;
            flex: 0 0 1.333333rem;
            height: 1.333333rem;
            // overflow: hidden;
            border-radius: 50%;
            background-color: #5e6265;

            .logo {
              // position: relative;
              // margin-right: 0.266667rem;
              width: 100%;
              flex: 0 0 100%;
              height: 1.333333rem;
              overflow: hidden;
              border-radius: 50%;
              background-color: #5e6265;
            }

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .listRig {
          align-self: center;

          .tit {
            font-size: 0.4rem;
            color: #222222;
            width: 6.7rem;
            margin-bottom: 0.04rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .word {
            font-size: 0.32rem;
            color: #888888;
          }
        }

        .bot {
          display: flex;
          justify-content: space-around;
          margin-top: 0.4rem;

          > div {
            > p {
              text-align: center;

              &:nth-child(1) {
                font-family: DINPro-Medium;
                font-size: 0.4rem;
                color: #222222;
              }

              &:nth-child(2) {
                font-size: 0.32rem;
                color: #888888;
              }
            }
          }
        }
      }
    }
  }

  .more {
    margin: auto;
    text-align: center;
    width: 2.133333rem;
    height: 0.8rem;
    line-height: 0.8rem;
    box-sizing: border-box;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
    margin-top: 0.666667rem;
  }
  .more_no{
    margin-top: 0.34rem;
    font-size: 0.32rem;
    color: #b5b5b5;
    text-align: center;
  }
  .loading {
    margin-top: 0.4rem;
  }

  .no_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;

    img {
      width: 4rem;
      height: 2.8rem;
    }

    .zw {
      font-size: 0.346667rem;
      color: #888888;
    }
  }
}

.filtr_select_box {
  width: 80%;
  height: 100%;
  overflow: hidden;

  .f_content {
    position: relative;
    // padding: 0 rem(30);
    // background-color: #fff;
    // padding-bottom: rem(50);
    z-index: 10;
    height: calc(100% - 1.8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    .f_btn_box {
      display: flex;
      flex-wrap: wrap;
      font-size: 0;
      justify-content: center;

      &:after {
        content: '';
        width: rem(216);
        height: 0;
        // margin-right: rem(20);
      }

      i {
        display: inline-block;
        box-sizing: border-box;
        width: rem(216);
        height: rem(64);
        margin-bottom: rem(23);
        margin-right: rem(20);
        line-height: rem(64);
        border-radius: rem(10);
        font-size: rem(26);
        border: solid 1px #e5e5e5;
        text-align: center;
        font-style: normal;
        color: #555;

        &:nth-child(2n) {
          margin-right: 0;
        }

        &.active {
          background-color: #fff4ed;
          border-color: #fd7f2c;
          color: #fd7f2c;
        }

        &.more {
          color: #fd7f2c;
        }
      }
    }
  }

  .f_btns_sub {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: rem(20) 0;
    text-align: center;
    font-size: 0;
    box-sizing: border-box;

    i {
      display: inline-block;
      width: rem(200);
      height: rem(78);
      line-height: rem(78);
      font-size: rem(28);
      text-align: center;
      border-radius: rem(10);
      border: solid 1px #e5e5e5;
      background-color: #fff;
      font-style: normal;
      color: #888;

      &.active {
        background-color: #fd7f2c;
        border-color: #fd7f2c;
        color: #fff;
      }

      &:first-child {
        margin-right: rem(27);
      }
    }
  }
}
</style>
